<template>
  <div>
    <div class="title">
      <h1>话题排行榜</h1>
      <img :src="imgUrl" alt="" class="heart1">
      <img :src="imgUrl" alt="" class="heart2">
    </div>
    <div 
      class="product-box"
      v-if="productList.length > 0"
      v-for="(item,index) in productList"
      :key="index"
       >
       <router-link :to="{name:'Details',params:{goodsid:item.goodsId}}">
        <img :src="item.goodsPic" alt="">
        <div class="product-text-box">
          <p class="product-msg">{{ item.goodsName }}</p>
          <p class="product-msg">天猫</p>
          <p class="product-price">￥{{ item.reference_price  }}</p>
        </div>
       </router-link>
    </div>
    <div v-else>数据正在加载中...</div>
  </div>
</template>

<script>
export default {
  name:"RankingList",
   data(){
    return{
      imgUrl:require("../../assets/hot-product/hot-topic_02.png"),
      productList:[]
    }
  },
   mounted() {
    var that = this;
    var flag = true;
    this.$axios.get("http://localhost:3000/api/hotTopic?count=4")
    .then(res => {
      this.productList = res.data
      
    })
    .catch(error => {
      console.log(new error(error))
    })
    window.addEventListener("scroll",function(){
      // console.log(document.documentElement.scrollTop);
      if(document.documentElement.scrollTop + window.innerHeight >= document.body.offsetHeight){
        if(flag==true){
          flag = false;
          that.$axios.get("http://localhost:3000/api/hotTopic?count=4")
          .then(res => {
            // console.log(res.data);
            that.productList = that.productList.concat(res.data);
            flag = true;
          })
          .catch(error => {
            console.log(new error(error))
          });
        }
      }
    })
  },
}
</script>

<style scoped>
h1{
    width: 100%;
    text-align: center;
    font-size:  0.4rem;
    font-weight: normal;
    margin-top: 0.85rem;
    color: #808080;
    margin-bottom: 0.267rem;
    float: left;
  }
  .heart1{
    width: 0.180rem;
    float: left;
    position: relative;
    left: 3.413rem;
    top: -0.587rem;
  }
  .heart2{
    position: relative;
    float: right;
    width: 0.180rem;
    right: 3.413rem;
    top: -0.587rem;
  }
  .product-box{
    width: 9.365rem;
    height: 3.067rem;
    background-color: #fff;
    box-shadow: 0.08rem 0.053rem 0.4rem rgba(0,0,0,0.1);
    float: left;
    border-radius: 0.134rem;
    margin-left: 0.337rem;
    margin-bottom: 0.533rem;
  }
  .product-box img{
    width: 2.373rem;
    height: 2.373rem;
    margin-left: 0.32rem;
    margin-top: 0.373rem;
    float: left;
  }
  .product-text-box{
    padding-top: 0.347rem;
    box-sizing: border-box;
    float: left;
    width: 62%;
    height: 100%;
    background-color: #fff;
    margin-left: 0.8rem;
    text-align: left;
  }
  .product-msg{
    font-size: 0.32rem;
    margin-bottom: 0.16rem;
    color: #808080;
  }
  .product-price{
    font-size: 0.427rem;
    margin-top: 0.4rem;
    color: #808080;
  }
  
</style>
